import { apiGetVideoList } from "@/api/red_envelope_video"
import request from '@/utils/nvue-request' 
import { static_video_list } from "../const.js"
const video_path = 'https://www.laikedata.com/uploads/20230214/3f26d950ac286eecedba49f5295f0819.mp4'

// ： js里没有ts, 这里放个静态数据，
// 在这个页面中，后台返回的数据格式如下
const videoListItemData = {
    "id": 5,
    "poster": "http://test.supply.com/upload/111.png",
    "video_path": "http://test.supply.com/upload/111.mp4",
    "describe": "1",
    "rule": {
        "rule": 2,
        "text": "播放结束触发"
    },
    "create_time": "2024-03-29 12:23",
    "update_time": "2024-04-22 09:42",
    "title": "测试视频"
}

// 在页面中，需要哪些数据：
// videoUrl 

/**
 * 
 courseId: res.id, //视频id
 courseDetailsId: item.id, //当前视频id
 courseDetailsName: res.title + " " + item.title, //视频标题
 content: item.introduction, //视频简介
 isGood: 0, //是否点赞 1:点赞 0:未点赞
 isCollect: 0, //是否追剧 1:已追 0:未追
 goodNum: 1, //点赞数量
 videoUrl: item.video_path, //视频播放地址
 titleImg: item.image, //视频封面图片

 {
 	videoUrl: '', // 相当于 video_path
	courseDetailsId: '',// 相当于 id
	titleImg: '', // 相当于 poster
	autoPlay: '' // 直接设为 false, 或者 true, 除了第一个，其余都为 false
 }
 */
let num = 1
const converter_field = [
	{
		needField: 'videoUrl',
		correspondingField: 'video_path'
	},
	{
		needField: 'courseDetailsId',
		correspondingField: 'id'
	},
	{
		needField: 'titleImg',
		correspondingField: 'poster'
	},
	{
		needField: 'courseDetailsName',
		correspondingField: 'title'
	},
	{
		needField: 'content',
		correspondingField: 'describe'
	}
]
export default {
	data() {
		return {
			loadStatus: 'init',
			viddeoMuted: true,
			// 视频列表的总条数。方便做分页, 在 page_size 不变的时候，这个值是不会变的。
			paginationInfo: {
				count: 0, // 总条数
				page_no: 1, // 当前第几页，
				page_size: 2 // 每页显示多少条
			},
			// 当前的播放位置
			
			current: 0,
			videoContextId: '',
			videoContext: null,
			videoList: []
		}
	},
	watch: {
		current(newVal) {
			var len = this.videoList.length
			if (newVal >= newVal - 3) {
				this.getJsonData()
			}
		}
	},
	created() {
		this.getJsonData()
	},
	
	methods: {
		/**
		 * 获取数据
		 * 这里有个设置，如果是第一页，直接拿数据。如果是最后一页呢。
		 */
		getJsonData() {
			const len = this.videoList.length
			// 说明已经是最后一页了.
			if (len >= this.paginationInfo.count && this.loadStatus !== 'init' ) {
				// 没有更多了
				this.loadStatus = 'nomore'
				return
			}
			if (this.loadStatus === 'loading') {
				return
			}
			this.loadStatus = 'loading'
			request.get("supply_video.video/lists", {
				params: {
					page_no: this.paginationInfo.page_no,
					page_size: this.paginationInfo.page_size,
				}
			}).then((res) => {
				console.log('新红包视频', res)
				this.setPaginationInfo(res)
				this.videoListHandler(res.lists)
				this.loadStatus = 'finished'
			}).catch((err) => {
				console.log('新红包视频', err)
			})
		},
		/**
		 * 字段转换
		 */
		fieldConverterHandler(list = []) {
			return list.map((item, index) => {
				// 第一个视频，自动播放。
				const converParams = {
					autoPlay: index ? false : true,
					autoPlay: false
				}
				converter_field.forEach(op => {
					converParams[op.needField] = item[op.correspondingField]
				})
				return {
					...item,
					...converParams
				}
			})
		},
		/**
		 * 先暂时设定为一次性请求到的数据
		 */
		videoListHandler(list = []) {
			const newList = this.fieldConverterHandler(list)
			const retVal = this.videoPathHandler(newList)
			this.videoList.push(...retVal)
			if (this.current === 0) {
				this.startPlay(this.current)
			}
			
			
			
			console.log('this.videoList 2', this.videoList, newList)
		},
		// 测试阶段，后台返回的视频路径是个无效的，这里先模拟下。
		videoPathHandler(list = []) {
			return list.map((item, index) => {
				// static_video_list
				const path = static_video_list[index] ? static_video_list[index].videoUrl : static_video_list[0].videoUrl
				
				return {
					
					...item,
					courseDetailsId: num++,
					videoUrl: path
				}
			})
		},
		setPaginationInfo(res) {
			const obj = JSON.parse(JSON.stringify(res, ['count', 'page_no', 'page_size']))
			
			this.paginationInfo = Object.assign({}, this.paginationInfo, obj)
		},
		loadStatusHandler() {
			
		}
	}
}